<template>
  <div class="box">
    <div class="main" v-if="show">
      <h1>登录</h1>
      <el-form
        :model="loginForm"
        status-icon
        :rules="rulesLogin"
        ref="loginForm"
        label-width="100px"
        class="demo-loginForm"
      >
        <el-form-item prop="email" label-width="0">
          <el-input
            type=""
            v-model.trim="loginForm.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label-width="0">
          <el-input
            type="password"
            v-model.trim="loginForm.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

        <el-button
          type="primary"
          @click="submitForm('loginForm')"
          class="loginBtn"
          :loading="loginLoading"
          >登录</el-button
        >
      </el-form>
      <div class="foot">
        还没有账号? <span class="login" @click="toSignUp">立即注册</span>
      </div>
    </div>
    <div class="main" v-else>
      <h1>注册</h1>
      <el-form
        :model="signUpForm"
        status-icon
        :rules="rulesLogin"
        ref="loginForm"
        label-width="100px"
        class="demo-signUpForm"
      >
        <el-form-item prop="email" label-width="0">
          <el-input
            type=""
            v-model.trim="signUpForm.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label-width="0">
          <el-input
            type="password"
            v-model.trim="signUpForm.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code" label-width="0">
          <el-input
            type="text"
            v-model.trim="signUpForm.code"
            autocomplete="off"
            placeholder="请输入推荐码(选填)"
          ></el-input>
        </el-form-item>

        <el-button
          type="primary"
          @click="submitForm('loginForm')"
          class="loginBtn"
          :loading="registerLoading"
          >注册</el-button
        >
      </el-form>
      <div class="foot">
        <span class="login" @click="toSignUp">使用已有账号登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import { login, register } from '@/api/index'
const validEmail = (email) => {
  return /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/.test(email)
}
let validateEmail = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入邮箱'));
  } else {
    if (!validEmail(value)) {
      callback(new Error("请输入正确的邮箱"));
    }
    callback();
  }
};
const rulesLogin = {
  email: [
    { required: true, validator: validateEmail, trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}
export default {
  data () {
    return {
      loginForm: {
        email: '',
        password: ''
      },
      signUpForm: {
        email: '',
        password: '',
        code: ''
      },
      rulesLogin,
      show: true,
      registerLoading: false,
      loginLoading: false
    };
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.show) {
            //登录
            this.loginLoading = true
            login(this.loginForm).then(res => {
              localStorage.setItem('token', res.data)
              this.$refs[formName].resetFields();
              this.loginLoading = false
              this.$router.push('/dashboard')
            }).catch(err => {
              console.log('err', err);
              this.loginLoading = false
            })
          } else {
            //注册
            this.registerLoading = true
            register(this.signUpForm).then(res => {
              this.registerLoading = false
              this.$refs[formName].resetFields();
              this.$message({
                message: '注册成功!',
                type: 'success'
              });
              this.show = !this.show
            }).catch(err => {
              this.registerLoading = false
              this.$message({
                message: '注册失败!',
                type: 'warning'
              });
            })
          }

        }
      });
    },
    toSignUp () {
      this.show = !this.show
    }
  }
}
</script>

<style lang='less' scoped>
.box {
  display: flex;
  flex-flow: column;
  height: 100%;
  background-color: #f1f3f4;
  justify-content: center;
  align-items: center;
  .main {
    padding: 40px;
    padding-right: 30px;
    width: 500px;
    text-align: center;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 15px #66b1ff;
    .loginBtn {
      width: 100%;
    }
    .foot {
      margin-top: 20px;
      .login {
        cursor: pointer;
        &:hover {
          color: #66b1ff;
        }
      }
    }
  }
}
</style>